import React, { Component } from 'react'
import { Carousel, Flex, Grid } from 'antd-mobile';


import nav1 from '../../../assets/images/nav-1.png'
import nav2 from '../../../assets/images/nav-2.png'
import nav3 from '../../../assets/images/nav-3.png'
import nav4 from '../../../assets/images/nav-4.png'

import './home.scss'

export class Home extends Component {

    state = {
        data: [],
        touer: [{ nav: nav1, name: '整租' }, { nav: nav2, name: '合租', path: '/main/houses' }, { nav: nav3, name: '地图找房' }, { nav: nav4, name: '去合租' }],
        house: []
    }

    componentDidMount() {
        this.getCarousel()
        this.gethouseList()
    }
    // 获取轮播图数据
    async  getCarousel() {
        const { body: data } = await (await fetch('http://localhost:8080/home/swiper')).json()

        this.setState({
            data
        })

    }

    // 渲染轮播图UI
    putCarousel() {
        let { data } = this.state
        return <Carousel
            autoplay
            infinite
            dots
        >
            {data.map(i => (
                <a
                    key={i.id}
                    href="http://www.baidu.com"
                    style={{ display: 'inline-block', width: '100%', height: 212 }}
                >
                    <img
                        src={`http://localhost:8080${i.imgSrc}`}
                        alt={i.alt}
                        style={{ width: '100%', height: 212, verticalAlign: 'top' }}

                    />
                </a>
            ))}
        </Carousel>
    }

    // 导航菜单函数
    putRouter() {
        let { touer } = this.state
        return (
            <Flex>
                {touer.map((i, index) => (
                    <Flex.Item key={index} onClick={() => this.props.history.push(i.path)}>
                        <img src={i.nav} alt="" />
                        <div>{i.name}</div>
                    </Flex.Item>
                ))}
            </Flex>)
    }

    // 获取租房小组数据
    async  gethouseList() {
        let { body: house } = await (await fetch('http://localhost:8080/home/groups?area=AREA%7C88cff55c-aaa4-e2e0')).json()
        this.setState({
            house
        })
    }

    // 租房小组
    puthouse() {
        let { house } = this.state
        return (
            <div className="group">
                <h3 className="group-title">
                    租房小组 <span className="more">更多</span>
                </h3>

                {/* 宫格组件 */}
                <Grid
                    data={house}
                    columnNum={2}
                    square={false}
                    hasLine={false}
                    renderItem={({ id, title, desc, imgSrc: src }) => (
                        <Flex className="group-item" justify="around" key={id}>
                            <div className="desc">
                                <p className="title">{title}</p>
                                <span className="info">{desc}</span>
                            </div>
                            <img src={`http://127.0.0.1:8080${src}`} alt="" />
                        </Flex>
                    )}
                />
            </div>
        )

    }



    render() {
        let { data } = this.state
        return (
            <div className="homeBox" key={data.length}>
                {/* 调用轮播图 */}
                {this.putCarousel()}

                {/* 导航菜单 */}
                {this.putRouter()}

                {/* 租房小组 */}
                {this.puthouse()}
            </div>

        );
    }
}